@import 'page_bundles/mixins_and_variables_and_functions';

.billing-plan-header {
  border-bottom: 0;
  padding-bottom: 0;

  .billing-plan-logo svg {
    height: 100px;
  }

  p {
    margin: 0;

    &:first-of-type {
      margin-top: 16px;
    }

    &:last-of-type {
      margin-bottom: 16px;
    }
  }
}

$gutter-small: $gl-spacing-scale-6;
$gutter: $gl-spacing-scale-7;
$badge-height: $gl-spacing-scale-7;

.billing-plans {
  // This color is not part of the GitLab-UI/Pajamas specifications.
  // We're using it only for marketing purposes
  $highlight-color: #6e49cb;

  margin-bottom: $gutter-small;

  > * + * {
    margin-top: $gutter-small;
  }

  .card-wrapper-has-badge {
    .card {
      @include gl-border-1;
      @include gl-border-solid;
      @include gl-rounded-top-left-none;
      @include gl-rounded-top-right-none;

      border-color: $highlight-color;
    }
  }

  .card-badge {
    @include gl-rounded-top-left-base;
    @include gl-rounded-top-right-base;
    @include gl-font-weight-bold;
    @include gl-px-5;
    @include gl-text-white;

    background-color: $highlight-color;

    // These border radii values are not defined in gitlab-ui,
    // but they are consistent with the startup-*.scss .card overrides
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;

    line-height: $badge-height;

    &-text {
      @include gl-display-block;
      @include gl-text-truncate;
    }
  }

  .card {
    @include gl-mb-0;

    &-active {
      background-color: var(--gray-light, $gray-light);
    }

    .card-body {
      .price-description {
        align-items: center;
        display: flex;
        flex-direction: row;
        color: $blue-500;
        font-size: 45px;
        font-weight: $gl-font-weight-bold;
        line-height: 1;

        .price-rebate {
          color: $blue-400;
          font-size: 20px;
          text-decoration: line-through;
        }

        .price-cut {
          text-decoration: line-through;
        }

        .conditions {
          list-style: none;
          font-size: $gl-font-size-large;
          font-weight: $gl-font-weight-bold;
          line-height: $gl-line-height;
        }
      }

      .price-conclusion {
        @include gl-font-base;
        color: $blue-500;
        font-weight: $gl-font-weight-bold;
      }
    }
  }
}

@media (min-width: $breakpoint-md) {
  .billing-plans {
    @include gl-display-flex;
    @include gl-flex-wrap;
    @include gl-justify-content-space-between;

    > * + * {
      @include gl-mt-0;
    }

    .card-wrapper {
      margin-bottom: $gutter-small;
      width: calc(50% - #{$gutter-small} / 2);

      &-has-badge {
        @include gl-pt-0;

        .card {
          height: calc(100% - #{$badge-height});
        }
      }
    }

    .card {
      @include gl-h-full;
    }
  }
}

@media (min-width: $breakpoint-lg) {
  .billing-plans {
    flex-wrap: nowrap;

    > * + * {
      margin-left: $gutter;
    }

    .card-wrapper {
      @include gl-flex-grow-1;
      @include gl-mb-0;
      @include gl-overflow-hidden;
    }
  }
}

.subscription-table {
  .flex-grid {
    .grid-cell {
      .property-label {
        color: var(--gl-text-color-secondary, $gl-text-color-secondary);
      }

      .btn-help {
        color: var(--blue-600, $blue-600);
      }

      .property-value {
        color: var(--gl-text-color, $gl-text-color);

        &.number {
          font-size: 20px;
          line-height: 24px;
        }
      }

      .icon-wrapper {
        line-height: 16px;
        vertical-align: baseline;

        svg {
          vertical-align: middle;
        }
      }

      &.header-cell {
        font-weight: $gl-font-weight-bold;
      }

      &.no-value {
        > * {
          display: none;
        }

        @include media-breakpoint-down(sm) {
          display: none;
        }
      }
    }

    @include media-breakpoint-up(lg) {
      .header-cell {
        width: 144px;
        flex: none;
      }
    }
  }
}

.billing-plan-card {
  width: 230px;
}

.billing-plan-divider {
  width: 780px;
}

.flex-grid {
  .grid-row {
    border-bottom: 1px solid var(--border-color, $border-color);
    padding: 0;

    &:last-child {
      border-bottom: 0;
    }

    @include media-breakpoint-down(md) {
      border-bottom: 0;
      border-right: 1px solid var(--border-color, $border-color);

      &:last-child {
        border-right: 0;
      }
    }

    @include media-breakpoint-down(xs) {
      border-right: 0;
      border-bottom: 1px solid var(--border-color, $border-color);

      &:last-child {
        border-bottom: 0;
      }
    }
  }

  .grid-cell {
    padding: 10px $gl-padding;
    border-right: 1px solid var(--border-color, $border-color);

    &:last-child {
      border-right: 0;
    }

    @include media-breakpoint-up(md) {
      flex: 1;
    }

    @include media-breakpoint-down(md) {
      border-right: 0;
      flex: none;
    }
  }
}

.card {
  .card-body.flex-grid {
    padding: 0;
  }
}
